<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

</body>
<script>
    let array = [1, 8, 4, 5, 3, 6, 1, 4]

    // 方法一：Set() set（）是集合的一种。
    // set() 函数创建一个无序不重复元素集，可进行关系测试，删除重复数据，还可以计算交集、差集、并集等。
    // Array.from() //将一个类数组对象或者可遍历对象(Set,Map,String)转成一个真正的数组
    // console.log(new Set(arr));//是一个对象
    const result = [...new Set(array)]
    // console.log(result);//[1, 8, 4, 5, 3, 6]
    const result1 = Array.from(new Set(array))
    // console.log(result1);//[1, 8, 4, 5, 3, 6]

    // Array.from还可以接受第二个参数，作用类似于数组的map方法，用来对每个元素进行处理，将处理后的值放入返回的数组
    // console.log('第二个参数',Array.from(new Set(arr), item => item + 1))

    // 方法二：双层for循环+splice  要改变原数组
    function uniqueFun2(arr) {
        let len = arr.length
        for (let i = 0; i < len; i++) {
            for (let j = i + 1; j < len; j++) {
                if (arr[i] === arr[j]) {
                    arr.splice(j, 1)
                    len--;
                }
            }
        }
        return arr
    }
    // console.log(uniqueFun2(array));

    // 方法三：forEach+indexOf去重
    function uniqueFun3(arr) {
        let newArr = []
        arr.forEach(item => {
            if (newArr.indexOf(item) === -1) {
                newArr.push(item)
            }
        });
        return newArr
    }
    const res = uniqueFun3(array)
    // console.log(res);
    const result2 = res.sort((a, b) => { //排序
        return b - a
    })
    // console.log(result2); //[8, 6, 5, 4, 3, 1]

    // 方法四：forEach+includes去重
    function uniqueFun4(arr) {
        let newArr = []
        arr.forEach((item) => {
            if (!newArr.includes(item)) {
                newArr.push(item)
            }
        })
        return newArr
    }
    // console.log(uniqueFun4(array));//[1, 8, 4, 5, 3, 6]

    // 方法五：filter+indexOf
    function uniqueFun5(arr) {
        const res = arr.filter((item, index) => {
            return arr.indexOf(item) === index //indexOf返回第一次出现的索引值
        })
        return res
    }
    // console.log(uniqueFun5(array));// [1, 8, 4, 5, 3, 6]

    // 方法六：Map()数据结构
    function uniqueFun6(arr) {
        const map = new Map()
        const newArr = []
        arr.forEach((item) => {
            if (!map.has(item)) {
                map.set(item, true)
                newArr.push(item)
            }
        })
        return newArr
    }
    // console.log(uniqueFun6(array));// [1, 8, 4, 5, 3, 6]

    // 方法七：reduce+includes
    function uniqueFun7(arr) {
        return arr.reduce((pre, cur) => {
            return (pre.includes(cur) ? pre : [...pre, cur])
        }, [])
    }
    // console.log(uniqueFun7(array));//[1, 8, 4, 5, 3, 6]
</script>

</html>